<script setup lang="ts">
const props = defineProps<{
  list: {
    id: number
    name: string
    num: number
    price: number
  }[]
}>()
// 接收 方法
const emits = defineEmits<{
  (e: 'setNum', id: number, step: number): void
}>()
// const add = (id: number) => {
//   emits('setNum', id, 1)
// }
// const reduce = (id: number) => {
//   emits('setNum', id, -1)
// }
</script>

<template>
  <div class="item" v-for="(item, index) in list" :key="index">
    <div class="name">{{ item.name }}</div>
    <div class="num">
      <button @click="emits('setNum', item.id, 1)">+</button> {{ item.num }}
      <button @click="emits('setNum', item.id, -1)">-</button>
    </div>
    <div class="price">{{ item.price }}</div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: space-evenly;
  div {
    flex: 1;
    text-align: center;
  }
}
</style>
